<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>书籍主页</title>
<!-- 引入jQuery.js文件 -->
<script type="text/javascript" src="../static/jquery-easyui-1.4.1/jquery.js"></script>
<link rel="stylesheet" href="../static/jquery-easyui-1.4.1/themes/gray/easyui.css">
<!-- 引入easyui小图标文件  -->
<link rel="stylesheet" href="../static/jquery-easyui-1.4.1/themes/icon.css">
<script type="text/javascript"src="../static/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
<script type="text/javascript"src="../static/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
	$(function(){
		//微调
		
	$('#number').numberspinner({
		required : true, //必填
		min:0
		});

		//空格校验器
		$.extend($.fn.validatebox.defaults.rules, {
			isBlank : {
				validator : function(value, param) {
					return $.trim(value) != ''
				},
				message : '请勿输入纯空格！'
			}
		});
	/* 	//数值验证组件
		$('#number').numberbox({
			min : 0, //最小值
			max : 1000, //最大值
			
			missingMessage : '请输入正确的库存！' //提示文字
		}); */

		//datagrid数据表格
		$('#t_book')
				.datagrid(
						{
							idField : 'id', //只要创建数据表格必须要加idField
							striped : true, //隔行变色
							url : 'list', //异步加载数据路径
							//title:'数据表格', //表头
							width : '100%', //宽度
							fitColumns : true, //自动宽度
							height : 645, //高度自适应
							loadMsg : '数据正在加载...请耐心等待....', //在从远程站点加载数据的时候显示提示消息
							rownumbers : true, //在表格前面显示行号
							nowrap : true, //折行显示
							//singleSelect:true, //只允许选中一行
							remoteSort : false, //取消本地排序

							frozenColumns : [ //冻结列，不能与fitColums一起使用
							[ {
								field : 'ck',
								width : 50,
								checkbox : true
							//复选框 与singleSelect冲突
							} ] ],
							columns : [ [
									{
										field : 'bookname',
										title : '图书名称',
										width : 120,
										align : 'center',
										sortable : true
									//允许列使用排序
									},
									{
										field : 'press',
										title : '出版社',
										width : 120,
										align : 'center',
										sortable : true
									},
									{
										field : 'writer',
										title : '作者',
										width : 120,
										align : 'center',
										sortable : true
									},
									{
										field : 'isbn',
										title : 'ISBN编码',
										width : 120,
										align : 'center',
										sortable : true
									},
									{
										field : 'id',
										title : '图片',
										align : 'center',
										width : 200,
										formatter : function(value) {
											return '<img  src="download?id='
													+ value
													+ '" style="width:98px;height:99px;">';
										}
									}, {
										field : 'number',
										title : '库存',
										width : 120,
										align : 'center',
										sortable : true
									} ] ],
							pagination : true, //设置分页
							pageSize : 10, //设置开始显示几条数据
							pageList : [ 10, 20, 50 ], //设置分页条数
							toolbar : [
									{
										text : '新增图书',
										iconCls : 'icon-add', //小图标
										handler : function() {
											$('#myform').form('clear'); //清空表单数据
											$('#mydialog').dialog({ //动态生成表头
												title : '新增图书',
											});
											$('#mydialog').dialog('open');
										}
									},
									{
										text : '修改信息',
										iconCls : 'icon-edit',
										handler : function() {
											flag = "edit";
											var arr = $('#t_book').datagrid(
													'getSelections'); //返回选中记录
											//判断是否选择一条记录或多条或未选
											if (arr.length == 0) {
												$.messager
														.show({
															title : '提示信息!',
															msg : '您还未选择要修改的数据！每次只能修改一条数据哟！',
															height : 180,
															width : 220
														});
											} else if (arr.length != 1) {
												$.messager.show({
													title : '提示信息!',
													msg : '每次只能选择一条数据进行修改！',
													height : 180,
													width : 220
												});
											} else {
												$('#mydialog').dialog({ //动态生成表头
													title : '修改信息',
												});
												$('#mydialog').dialog('open'); //打开窗口
												$('#myform').form('clear');
												//重写数据
												$('#myform').form('load', {
													id : arr[0].id,
													bookname : arr[0].bookname,
													press : arr[0].press,
													writer : arr[0].writer,
													isbn : arr[0].isbn,
													number : arr[0].number
												});

											}
										}
									},
									{
										text : '删除图书',
										iconCls : 'icon-remove',
										handler : function() {
											var arr = $('#t_book').datagrid(
													'getSelections');
											if (arr.length <= 0) {
												$.messager.show({
													title : '提示信息!',
													msg : '至少选择一条数据进行删除',
													height : 180,
													width : 220
												});
											} else {
												$.messager
														.confirm(
																'提示信息',
																'确认删除？',
																function(r) {
																	if (r) {
																		//批量删除
																		var ids = '';
																		for (var i = 0; i < arr.length; i++) {
																			ids += arr[i].id
																					+ ',';
																		}
																		ids = ids
																				.substring(
																						0,
																						ids.length - 1);
																		$
																				.post(
																						'delete',
																						{
																							ids : ids
																						},
																						function(
																								result) {
																							//1.刷新数据表格
																							$(
																									'#t_book')
																									.datagrid(
																											'reload');
																							//2.清空idField
																							$(
																									'#t_book')
																									.datagrid(
																											'unselectAll');
																							//3.提示信息
																							$.messager
																									.show({
																										title : '提示信息!',
																										msg : '操作成功！',
																										height : 180,
																										width : 220
																									});
																						});
																	} else {
																		return;
																	}
																});
											}
										}
									} ]
						});

		//提交表单方法
		$('#myform').form({
			url : "save", //请求地址
			onSubmit : function() { //提交之前触发，返回false停止
				if (!$('#myform').form('validate')) { //validate做表单字段验证，当所有字段都有效的时候返回true
					$.messager.show({
						title : '提示信息',
						msg : '验证没用通过，不能提交',
						height : 180,
						width : 220
					});
					return false; //返回false，表单不提交
				}
			},
			success : function(result) { //提交之后触发
				//1.关闭窗口
				$('#mydialog').dialog('close');
				//2.刷新datagrid 保持在当前页
				$('#t_book').datagrid('reload');
				//3.提示信息
				$.messager.show({
					title : '提示信息',
					msg : '操作成功！',
					height : 180,
					width : 220
				});
			}
		});
		//点击按钮提交
		$('#btn1').click(function() {
			$('#myform').submit();
		});

		//关闭窗口
		$('#btn2').click(function() {
			$('#mydialog').dialog('close');
		});
		//查询
		$('#searchbtn').click(function() {
			$('#t_book').datagrid('load', serializeForm($('#mysearch')));
		});
		//清空查询
		$('#clearbtn').click(function() {
			$('#mysearch').form('clear'); //清空表单数据
			$('#t_book').datagrid('load', {}); //重新刷新表格
		});

	});

	//js方法：序列化表单
	function serializeForm(form) {
		var obj = {};
		$.each(form.serializeArray(), function(index) {
			if (obj[this['name']]) {
				obj[this['name']] = obj[this['name']] + ',' + this['value'];
			} else {
				obj[this['name']] = this['value'];
			}
		});
		return obj;
	}
</script>
</head>
<body>
	<div id="lay" fit=true style="width: 100%;height: 100%;">
		<div region="north" title="图书查询" style="height:26px;">
			<form id="mysearch" method="post">
				 <div class="input_container">
				 	<input class="easyui-textbox" label="书名" labelPosition="top" data-options="prompt:'请输入图书名称',iconCls:'icon-book'" style="width:200px;height:26px;" name="bookname">
				 	&nbsp;
				 	<input class="easyui-textbox" label="作者" labelPosition="top" data-options="prompt:'请输入作者名称',iconCls:'icon-user1'" style="width:200px;height:26px;" name="writer">
				 	&nbsp;
				 	<input class="easyui-textbox" label="ISBN编号" labelPosition="top" data-options="prompt:'请输入ISBN编号',iconCls:'icon-sum'" style="width:200px;height:26px;" name="isbn">
				 	&nbsp;
				 	<a id="searchbtn" class="easyui-linkbutton"  iconCls='icon-search'>查询</a>
					<a id="clearbtn" class="easyui-linkbutton" iconCls='icon-undo'>清空</a>
				 </div>
			</form>
		</div>
		<div region="center">
			<table id="t_book"></table>
		</div>
	</div>
	
	<div id="mydialog" class="easyui-dialog" style="width:250px;" closed=true modal=true draggable=false title="新增图书">
		<form id ="myform" enctype="multipart/form-data" method="post">
			<input type="hidden" name="id" value=""/>
			<table class="input_container">
				<tr>
					<td>
						<label for="file">图书图片</label>
					</td>
					<td>
						<input data-options="buttonText:'浏览',prompt:'上传图片'" class="easyui-filebox" name="file" id="file" style="width: 170px;">
					</td>
				</tr>
				<tr>
					<td>
						<label for="bookname">书名</label>
					</td>
					<td>
						<input type="text"name="bookname" id="bookname" class="easyui-validatebox easyui-textbox" required=true validType="isBlank" missingMessage="书名必填！"style="width: 170px;">
					</td>
				</tr>
				<tr>
					<td>
						<label for="press">出版社</label>
					</td>
					<td>
						<input type="text"name="press" id="press" class="easyui-validatebox easyui-textbox" required=true validType="isBlank" missingMessage="出版社名称必填！"style="width: 170px;">
					</td>
				</tr>
				<tr>
					<td>
						<label for="writer">作者</label>
					</td>
					<td>
						<input type="text"name="writer" id="writer" class="easyui-validatebox easyui-textbox" required=true validType="isBlank" missingMessage="作者必填！"style="width: 170px;">
					</td>
				</tr>
				<tr>
					<td>
						<label for="isbn">ISBN编号</label>
					</td>
					<td>
						<input type="text"name="isbn" id="isbn" class="easyui-validatebox easyui-textbox" required=true validType="isBlank" missingMessage="ISBN编号必填！"style="width: 170px;">
					</td>
				</tr>
				<tr>
					<td>
						<label for="number">库存</label>
					</td>
					<td>
						<input type="text"name="number" id="number" style="width: 170px;">
					</td>
				</tr>
				<tr style="text-align:right;">
					<td colspan="2">
						<a class="easyui-linkbutton" id="btn1" iconCls='icon-save'>确定</a>
						<a class="easyui-linkbutton" id="btn2" iconCls='icon-undo'>关闭</a>
					</td>
				</tr>
			</table>			
		</form>
	</div>
</body>
</html>